import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";

type CellProps = {
    title: string;
    value?: string;
    color?: string,
    showline?: boolean,
    icon?: keyof typeof Ionicons.glyphMap;
    showArrow?: boolean;
    onPress?: () => void
}

const Cell: React.FC<CellProps> = ({ title, value, color, showline, icon, showArrow, onPress }) => {
    return <Pressable style={showline ? styles.cell : styles.notline} onPress={onPress}>
        {icon && <View style={[styles.left, { backgroundColor: color + '20' }]}>
            <Ionicons name={icon} size={22} color={color} />
        </View>
        }
        <Text style={styles.title}>{title}</Text>
        <View style={styles.right}>
            {value && <Text style={styles.value}>{value}</Text>}
            {showArrow && <Ionicons name="chevron-forward" size={18} color="#ccc" />}
        </View>
    </Pressable>
}

const styles = StyleSheet.create({
    cell: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 14,
        paddingHorizontal: 16,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#eee'
    },
    notline: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 14,
        paddingHorizontal: 16,
    },
    left: {
        width: 36,
        height: 36,
        borderRadius: 18,
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 10,
    },
    right: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    title: {
        flex: 1,
        fontSize: 16,
        color: '#333',
    },
    value: {
        fontSize: 14,
        color: '#999',
        marginRight: 6,
    }
});

export default Cell;